<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start" *ngIf="!isShare">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Combat - {{ combat.name }}</ion-title>
    <ion-buttons slot="end" *ngIf="canShare">
      <ion-button (click)="share()">
        <ion-icon slot="icon-only" name="share"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">

  <div class="blank-slate" *ngIf="!isLoaded">
    <ion-spinner></ion-spinner> &nbsp; Loading...
  </div>

  <ion-list>
    <ion-item-group>
      <ion-item-divider>
        {{ combat.name }}
        <br>
        ({{ combat.timestamp | date:'medium' }})
      </ion-item-divider>
      <ion-item>
        <ion-row class="full-width ion-flex-wrap">
          <ion-col *ngFor="let combatParty of combat.parties | keyvalue" size-xs="12" size-md="6">
            <div>
              <strong>{{ combatParty.value.name }}</strong>
            </div>
            <div *ngFor="let combatCharacter of combat.characters | keyvalue" [class.ion-hide]="combatCharacter.value.combatPartyId !== combatParty.value.id">
              {{ combatCharacter.value.name }} (Level {{ combatCharacter.value.level | number }} 
              <span *ngIf="combatCharacter.value.attribute">{{ combatCharacter.value.attribute }} {{ combatCharacter.value.affinity }}</span>
              <span *ngIf="combatCharacter.value.profession">{{ combatCharacter.value.profession }}</span>)
              [HP {{ combatCharacter.value.stats.hp | number }}]
            </div>
          </ion-col>
        </ion-row>
      </ion-item>
    </ion-item-group>

    <ion-item-group>
      <ion-item-divider>Combat Rewards</ion-item-divider>
      <ion-item>
        <ion-grid>
          <ion-row class="full-width">
            <ion-col class="ion-text-center">
              {{ combatAnte.xp | number }} XP
            </ion-col>
            <ion-col class="ion-text-center">
              {{ combatAnte.gold | number }} Gold
            </ion-col>
          </ion-row>
  
          <ion-row class="full-width">
            <ion-col class="ion-text-center" *ngIf="combatAnte.items.length > 0">
              <div *ngFor="let item of combatAnte.items" class="true-center">
                <ion-icon [src]="'assets/icon/category-gear.svg'" class="ion-margin-end"></ion-icon> {{ item }}
              </div>
            </ion-col>
            <ion-col class="ion-text-center" *ngIf="combatAnte.collectibles.length > 0">
              <div *ngFor="let coll of combatAnte.collectibles" class="true-center">
                <ion-icon [src]="'assets/icon/category-collectibles.svg'" class="ion-margin-end"></ion-icon> {{ coll }}
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-item>
    </ion-item-group>

    <ion-item-group>
      <ion-item-divider>Results</ion-item-divider>
      <ion-item *ngFor="let message of summaryMessages">
        {{ message }}
      </ion-item>
    </ion-item-group>

    <ion-item-divider>Combat Log</ion-item-divider>
  </ion-list>

  <ion-virtual-scroll [items]="combatMessages" *ngIf="combatMessages.length > 0">
    <ion-item *virtualItem="let item" [color]="item.highlight ? 'light' : ''" approxItemHeight="70px">
      <ng-container [ngSwitch]="item.message">
        <ng-container *ngSwitchCase="'__summary'">
          <ng-container *ngTemplateOutlet="summary; context: { combat: item.data }"></ng-container>
        </ng-container>

        <ng-container *ngSwitchDefault>
          {{ item.message }}
        </ng-container>
      </ng-container>
    </ion-item>
  </ion-virtual-scroll>
</ion-content>

<ng-template #summary let-combat="combat">
  <ion-row class="full-width">
    <ion-col>
      <ion-row class="ion-flex-wrap">
        <ion-col class="ion-text-center">
          «Round {{ combat.currentRound + 1 }}»
        </ion-col>
      </ion-row>

      <ion-row class="ion-flex-wrap">
        <ng-container *ngFor="let combatParty of combat.parties | keyvalue">
          <ion-col size-xs="12" 
            size-md="6" 
            class="ion-text-center"
            [class.dead-combatant]="getTotalPartyHealth(combatParty.key, combat) <= 0">
            <div>
              <strong>
                <a class="clickable" (click)="displayPartyCombatMembers(combatParty.key, combat)">{{ combatParty.value.name }} [HP {{ getTotalPartyHealth(combatParty.key, combat) | number }}]</a>
              </strong>
            </div>
          </ion-col>
        </ng-container>
      </ion-row>
    </ion-col>
  </ion-row>
</ng-template>
